//store目录用于存放vuex的相关信息
// 配置Vuex
import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

const store = new Vuex.Store({

  //state存储数据的状态
  state : {
    count : 0   //存储了1个公共状态count
  },

  // getters获取数据状态  getters 中的方法 用于获取公共状态的值
  getters : {
    getCounts(state){
      return state.count;
    }

  },

  //mutations更改数据状态的唯一方法    mutation中的方法 用于改变公共状态的值
  mutations : {
    increment(state , val){
      state.count += val;
    },
    decrement(state , val){
      state.count -= val;
    }
  },


  // actions提交的是mutation，处理的异步操作
  actions:{
    //传递的参数为arg
    pushIncrementState({commit ,state}, args){
       commit('increment',args)
    },
    pushDecrementState({commit , state} , args){
      commit('decrement',args)
    }
  }
});
//导出store
export default store


/**
 * Store=State+Mutation
 1 .State(与store的区别)：

 每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中，且子组件能通过 this.$store 访问到。

 mapState 辅助函数:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性


 2.Getter

 从 store 中的 state 中派生出一些状态.

 所解决问题：如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它

 mapGetters 辅助函数

 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
 3.Mutation（必须为同步函数）

 类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

 store.commit：调用

 在组件中提交 Mutation

 你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
 4.Action(解决异步)

 Action 提交的是 mutation，而不是直接变更状态。

 Action 可以包含任意异步操作

 store.dispatch :分发 Action,Action  的触发方法

 在组件中分发 Action

 你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

 作者：POLOCY
 链接：https://www.jianshu.com/p/250db2cdc918
 来源：简书
 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 */
